import { getArticle } from "@/services"
import {
  IntlType,
  Key,
  PageContainer,
  ProColumns,
  ProTable,
} from "@ant-design/pro-components"
import { Box } from "@mui/system"
import React from "react"
import { useRequest } from "ahooks"
import { SortOrder } from "antd/es/table/interface"
import { Button, DatePicker, Divider, Space, Tag, Image, Popover } from "antd"
import dayjs from "dayjs"
import { EyeOutlined } from "@ant-design/icons"
export default () => {
  const { runAsync, loading } = useRequest((params) => getArticle(params), {
    manual: true,
  })
  const requester = async (
    { current, pageSize, ...params }: any,
    sort: Record<string, SortOrder>,
    filter: Record<string, (string | number)[] | null>,
  ) => {
    const sortParams: any = {}
    Object.keys(sort)?.forEach?.((key) => {
      sortParams[key] = sort[key] === "ascend" ? "ascend" : "desc"
    })
    const res = await runAsync({ pageSize, pageNo: current, ...sortParams })
    return res?.data
  }
  const columns: ProColumns<any>[] = [
    {
      title: "封面",
      dataIndex: "cover",
      valueType: "image",
      hideInSearch: true,
      render: (dom, entity, index, action, schema) => {
        return (
          <Image
            height={60}
            width={"100%"}
            style={{ objectFit: "cover" }}
            src={
              window.alignConfig.blogSourceMinio +
              "/memoryimage/" +
              entity?.cover?.[0]
            }
          ></Image>
        )
      },
    },
    {
      title: "标题",
      dataIndex: "title",
      width: 150,
      render(dom, entity, index, action, schema) {
        return (
          <span style={{ fontWeight: "bold" }}>{entity?.title ?? "-"}</span>
        )
      },
    },
    {
      title: "作者",
      dataIndex: "author",
      renderText(text, record, index, action) {
        return record?.owner?.username ?? "位置"
      },
    },
    {
      title: "简介",
      dataIndex: "abstract",
    },
    {
      title: "文件类型",
      dataIndex: "fileType",
      valueType: "select",
      fieldProps: {
        options: [
          { label: "HTML", value: ".html" },
          { label: "Markdown", value: ".md" },
          { label: "TXT", value: ".txt" },
        ],
      },
    },
    {
      title: "标签",
      dataIndex: "tags",
      render(dom, entity, index, action, schema) {
        return entity?.tags?.length ? (
          <Popover
            trigger={"click"}
            content={
              <Space>
                {entity?.tags?.map((tag: string) => (
                  <Tag color="processing" key={tag}>
                    {tag}
                  </Tag>
                ))}
              </Space>
            }
          >
            <Button size="small" icon={<EyeOutlined />}>
              查看
            </Button>
          </Popover>
        ) : (
          "-"
        )
      },
    },
    {
      title: "状态",
      dataIndex: "status",
      width: 60,
      renderText(text, record, index, action) {
        return text ?? "0"
      },
    },
    {
      title: "创建时间",
      dataIndex: "create_time",
      sorter: true,
      renderFormItem(schema, config, form, action) {
        return (
          <DatePicker.RangePicker
            allowEmpty={[true, true]}
            onChange={(dates, datesring) => {}}
          />
        )
      },
      renderText(text, record, index, action) {
        return dayjs(text)?.format("YYYY-MM-DD HH:mm:ss")
      },
    },
    {
      title: "最近修改",
      dataIndex: "last_edit",
      sorter: true,
      renderFormItem(schema, config, form, action) {
        return (
          <DatePicker.RangePicker
            allowEmpty={[true, true]}
            onChange={(dates, datesring) => {}}
          />
        )
      },
      renderText(text, record, index, action) {
        return dayjs(text)?.format("YYYY-MM-DD HH:mm:ss")
      },
    },
    {
      title: "操作",
      dataIndex: "action",
      width: 160,
      hideInSearch: true,
      renderText(text, record, index, action) {
        return (
          <>
            <Box className="space-x-2">
              <Button type="link">编辑</Button>
              <Button type="link" danger>
                删除
              </Button>
            </Box>
          </>
        )
      },
    },
  ]
  return (
    <Box>
      <PageContainer
        style={{ minWidth: "fit-content" }}
        title={"文档"}
        subTitle={"documents"}
      >
        <ProTable
          rowSelection={{ type: "checkbox", preserveSelectedRowKeys: true }}
          rowKey={"fid"}
          tableAlertOptionRender={({
            intl: IntlType,
            selectedRowKeys,
            selectedRows,
            onCleanSelected,
          }) => (
            <Box className="space-x-2">
              <Button type="primary" size="small">
                批量编辑
              </Button>
              <Divider type="vertical"></Divider>
              <Button danger type="primary" size="small">
                批量删除
              </Button>
              <Divider type="vertical"></Divider>
              <Button type="link" onClick={onCleanSelected}>
                取消选择
              </Button>
            </Box>
          )}
          columns={columns}
          loading={loading}
          request={requester}
        ></ProTable>
      </PageContainer>
    </Box>
  )
}
